<template>
  <div class="edit-smoothie container" v-if="smoothie">
    <h2>Edit smoothie: {{ smoothie.title }}</h2>

    <form @submit.prevent="EditSmoothie">
        <div class="field title">
          <label for="title">Smoothie Title</label>
          <input type="text" name="title" v-model="smoothie.title" />
        </div>
        <div class="field ingredient" v-for="(ing,index) in smoothie.ingredients" :key="index">
          <label for="ingredient">Ingredient</label>
          <input type="text" name="ingredient" v-model="smoothie.ingredients[index]" />
          <i class="material-icons delete" @click="deleteIng(index)">delete</i>
        </div>

        <div class="field edit-ingredient">
          <label for="add-ingredient">Add an ingredient</label>
          <input type="text" name="add-ingredient" @keydown.tab.prevent="AddIng" v-model="another" />
        </div>
        <div class="field center-align">
          <p if="feedback" class="red-text">{{feedback}}</p>
          <button class="btn pink">Update Smoothie</button>
        </div>
      </form>

  </div>
</template>

<script>
//import '../assets/style.scss'
import db from "@/firebase/init";
import slugify from "slugify";
export default {
  name: "EditSmoothie",
  data() {
    return {
      //slug: this.$route.params.slug
      smoothie: null,
      another:null,
      feedback:null,
    };
  },
  created() {
    //let ref =db.collection('smoothies').doc(id)
    let ref = db
      .collection("smoothies")
      .where("slug", "==", this.$route.params.slug);
    ref.get().then(snapshot => {
      snapshot.forEach(doc => {
        this.smoothie = doc.data();
        this.smoothie.id = doc.id;
      });
    });

  },
  methods: {

      AddIng() {
      if (this.another) {
        this.smoothie.ingredients.push(this.another);
        this.another = null;
        this.feedback = null;
        //console.log(this.ingredients)
      } else {
        this.feedback = "You must enter a value";
      }
    },

    deleteIng(index) {
      this.smoothie.ingredients = this.smoothie.ingredients.filter(
        (ing, argIndex) => argIndex !== index
      );
    },
    EditSmoothie(){
        
        if (this.smoothie.title) {
        this.feedback = null;
        this.smoothie.slug = slugify(this.smoothie.title, {
          replacement: "-",
          remove: /[$*_+~.()'"!\-:@]/g,
          lower: true
        });
        //console.log(this.slug);
        let ingredientsEdit = [...this.smoothie.ingredients, this.another];
        db.collection("smoothies").doc(this.smoothie.id)
          .update({
            title: this.smoothie.title,
            ingredients: ingredientsEdit.filter(
              ing => ing !== null && ing.length > 0
            ),
            slug: this.smoothie.slug
          })
          .then(() => {
            this.$router.push({ name: "Index" });
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.feedback = "You must endter a smoothie title";
      }
    }

  },
};
</script>

<style lang="scss" scoped>
.edit-smoothie {
  margin-top: 60px;
  padding: 20px;
  max-width: 500px;
}
.edit-smoothie h2 {
  font-size: 2em;
  margin: 20px auto;
}
.edit-smoothie .field {
  margin: 20px auto;
  position: relative;
}
.edit-smoothie .delete {
  position: absolute;
  right: 0;
  bottom: 16px;
  color: #aaa;
  font-size: 1.4em;
  cursor: pointer;
}
</style>
